<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>沐芃科技</title>
    <link rel="stylesheet" type="text/css" href="../../css/public.css" />
    <style>
        #content {
		width: 100%;
		height: 100vh;
		background-color: #FFF;
	}

	.topHead {
		width: 90%;
		margin: 20px auto;
		height: 85px;
		position: relative;
	}

	.topHead img {
		width: 100%;
		height: 100%;
	}

	.topHead .moneyPay {
		width: 70%;
		height: 50px;
		position: absolute;
		left: 20px;
		top: 50%;
		transform: translate(0, -50%);
	}

	.topHead .moneyPay p {
		color: #FFF;
		font-size: 13px;
	}

	.center {
		width: 90%;
		margin: 10px auto;
		height: 280px;
		/* background-color: #A2A0B2; */
	}

	.center .centerList {
		width: 100%;
		height: 250px;
		/* background-color: #BCB4FF; */
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	/* 	.center_box_one {
		width: 100%;
		height: 220px;
	}
 */
	.centerList .one {
		width: 31%;
		height: 70px;
		border: 1px solid #EEEEEE;
		border-radius: 5px;
		position: relative;
		/* margin-right: 5px; */
	}
    .one .Noerrer {
		width: 25px;
		height: 25px;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.centerList .one .small_bg {
		width: 90%;
		height: 15px;
		position: absolute;
		left: 0;
		top: 0;
	}

	.centerList .one .txt {
		position: absolute;
		left: 0;
		top: 0;
		color: #FFF;
		font-size: 10px;
	}
    .centerList .one .txtt {
		position: absolute;
		left: 0;
		top: 15px;
		font-size: 8px;
	}
	.centerList .one .bott {
		width: 100%;
		height: 60px;
		position: absolute;
		left: 0;
		top: 15px;
	}

	.centerList .one .bott1 {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0px;
	}

	.centerList .one .bott div {
		color: #7D64FE;
		font-size: 13px;
	}


	.payBox {
		width: 90%;
		margin: 20px auto;
		height: 75px;
	}

	.payBot {
		width: 100%;
		height: 45px;
		margin-top: 10px;
		line-height: 45px;
	}

	.payBotOne {
		width: calc(48% - 20px);
		height: 100%;
		background-color: #F8F8F8;
		padding: 0 10px;
	}

	.payBotOne .left {
		width: 100%;
		height: 100%;
		color: #000;
	}

	.payBotOne .left img {
		width: 30px;
		height: 30px;
		margin-right: 20px;
	}

	.checkCricle {
		width: 10px;
		height: 10px;
		border: 1px solid #A2A0B2;
		border-radius: 50%;
	}

	.activeCricle {
		width: 10px;
		height: 10px;
		border: 1px solid #816EFB;
		border-radius: 50%;
		background-color: #816EFB;
	}
.centerList .active{
    border: 1px solid #816EFB;
}

	.bottBox {
		width: 90%;
		height: 160px;
		margin: 10px auto 0px;
	}

	.bottBoxList {
		margin-top: 10px;
		height: 120px;
		color: #918E94;
		font-size: 12px;
		width: 100%;
	}

	.button {
		width: 280px;
		height: 50px;
		background: linear-gradient(90deg, #BCB4FF 0%, #816EFB 100%);
		border-radius: 25px;
		margin: 30px auto 0;
		text-align: center;
		line-height: 50px;
		color: #FFF;
		font-weight: bold;
	}
    </style>
</head>

<body>
    <div id="view" v-cloak>
        

            <div id="content">
                <div class="topHead">
                    <img src="../../image/img/account/banners.png" alt="">
                    <div class="moneyPay flex">
                        <p>我的钻石</p>
                        <p style="font-size: 18px;font-weight: bold; margin-left: 10px;">{{myMoney}}</p>
                    </div>
                </div>
    
                <div class="center flex_column">
                    <p style="font-size: 13px;color: #A2A0B2;margin-bottom: 10px;">请选择充值钻石:</p>
                    <div class="centerList flex">
                        <div class="one" @click="cIndex=index" :class="{'active':cIndex==index}" v-for="(m, index) in ffList">
                            <img v-if="m.reward_money || m.reward_noble_name" src="../../image/img/account/small_bg.png" alt="" style="width: 80%;" class="small_bg">
                            <p class="txt" v-if="m.reward_money">加送{{m.reward_money}}钻石</p>
                            <p class="txtt" v-if="m.reward_noble_name">加送{{m.reward_noble_day}}天{{m.reward_noble_name}}</p>

                            <div class="bott flex_column_center">
                                <div class=" flex" style="font-weight: bold;">
                                    <p>{{m.money}}</p>
                                    <p style="font-size: 10px;">钻石</p>
                                </div>
                                <p style="font-size: 12px; color: #D1D1D1;">￥{{m.price}}</p>
                            </div>
                            <img src="../../image/img/account/right.png" v-if="cIndex==index" alt="" class="Noerrer">
                        </div>
                       
                        
    
    
    
                    </div>
    
    
    
    
    
                </div>
               
    
                <!-- 支付方式 -->
                <div class="payBox flex_column">
                    <p style="font-size: 13px;color: #A2A0B2;">请选择支付方式：</p>
                    <div class="payBot flex_between">
                        <div class="payBotOne " v-if="PAY_W" @click="payIndex=0">
                            <label>
                            <div class="left ">
                                <img src="../../image/img/account/wx.png" alt="" style="float: left;margin-top: 10px;" >
                                <span style="float: left;margin-top: 3px;">微信</span>
                                <input name="pay" type="radio" v-if="payIndex==0" checked value="0" style="float: right;margin-top: 18px;">
                            <input name="pay" type="radio" v-else value="1" style="float: right;margin-top: 18px;">
                            </div>
                            
                            </label>
                        </div>
                        <div class="payBotOne " v-if="PAY_A" @click="payIndex=1">
                        <label>
                            <div class="left ">
                                <img src="../../image/img/account/zfb.png" alt="" style="float: left;margin-top: 10px;">
                                <span style="float: left;margin-top: 3px;">支付宝</span>
                                <input name="pay" type="radio" value="1" v-if="payIndex==1" checked style="float: right;margin-top: 18px;">
                            <input name="pay" type="radio" v-else value="0" style="float: right;margin-top: 18px;">
                            </div>
                            
                        </label>
                        </div>
                    </div>
                </div>
    
                <!-- 提现说明 -->
                <div class="bottBox flex_column">
                    <p style="font-size: 13px; color: #333333;">提现说明</p>
                    <div class="bottBoxList flex_column_around">
                        <div class="flex">
                            <p>1、充值即代表已阅读并同意</p>
                            <a href="" style="color: #7F6CFC;font-size: 11px;" @click.stop="openPage(15)">《遇聊充值服务协议》</a>
                        </div>
                        <div class="flex">
                            <p>2、前往收支明细，可查询充值订单详情和消费详情 </p>

                        </div>

                        <div class="flex">
                            <p>3、禁止未成年人进行充值，点击详</p>
                            <a href="" style="color: #7F6CFC;font-size: 11px;" @click.stop="openPage(22)">《遇聊未成年人保护计划》
                            </a>
                        </div>

                    </div>
                </div>
    
    
                <div class="button" onclick="submit()">
                    立即充值
                </div>
            </div>

















            
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/jsencrypt.js"></script>
<script src="../../script/zhifu.js"></script>
<script>
    var view = new Vue({
        el: '#view',
        data: {
            imgurl: imgurl,
            ffList: [],
            ffInfo: {},
            ios: 1, // 1上架 0非上架

            myMoney: 0,
            payIndex: 1, //1 支付A 0vx
            cIndex: 0,
            PAY_A: PAY_A,
            PAY_W: PAY_W,
            escape_a: escape_a,
            escape_w: escape_w
        },
        methods: {
            // 跳转
            _url(param, url) {
                _url(param, url);
            },
            // 返回图片路径
            returnImg(url) {
                return returnImg(url);
            },
            openPage(val) {
                openPage(val)
            }
        }
    })

    apiready = function() {
        _listener('viewappear', function() {
            getMyMoney();
            getChong();
        })
        getMyMoney();
        getChong();
    }

    // 渲染充值列表
    function getChong() {
        _ajax('api/Topup/lists', function(ret, err) {
            console.log(JSON.stringify(ret));
            console.log(JSON.stringify(err));
            if (ret && ret.code == 200) {
                view.ffList = ret.data;
            }
        }, {
            user_id: $api.getStorage('userid')
        })
    }

    // 获取余额
    function getMyMoney() {
        _ajax('api/user/userVolley', function(ret, err) {
            console.log(JSON.stringify(ret));
            console.log(JSON.stringify(err));
            if (ret && ret.code == 200) {
                view.myMoney = ret.volley;
            }
        }, {
            user_id: $api.getStorage('userid'),
        })
    }

    // 确定
    function submit() {
        var userid = $api.getStorage('userid');
        var data = view.ffList[view.cIndex];

        var param = setRSA('[userid={{' + userid + '}}][id={{' + data.id + '}}][paymethod={{' + view.payIndex + '}}]');
        _ajax('api/topup/recharge', function(ret, err) {
            console.log(JSON.stringify(ret))
            console.log(JSON.stringify(err))
            var payType = view.payIndex == 1 ? 'pay_a' : 'pay_w';
            if (ret.code == 200) {
                openOtherPay({
                    money: data.price,
                    payType: payType,
                    info: ret.data,
                }, function() {
                    openOtherPaySuccess()
                })
            } else {
                _msg(ret.msg);
            }
        }, {
            z: param,
        })
    }


    // 设置密钥
    function setRSA(msg) {
        var rsa = new JSEncrypt();
        rsa.setPublicKey(
            '-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCpvdExvx5zybwFboU1NSjuIghiuXNQSNiJ27G8iETbJdhtibKvTlbyzBVhq0brhnG16MG29pf8055zwODYKpWC+hPVJTflzhcYEVEqRpstq9q2BHe75ErRgjYIQiNGZJ11czQUj82TgDP3xMKntpchel5J3XbYfGjMzG3nARoOpwIDAQAB-----END PUBLIC KEY-----',
            '10001');
        return rsa.encrypt(msg);
    }

    // 重载 支付成功
    function openOtherPaySuccess() {
        _url({
            data: view.ffList[view.cIndex],
            title: '',
        }, 'frame4/chong_success')
        // _url({
        //     url: 'frame3/choujiang',
        //     title: '首冲抽奖',
        //     winName: 'member_win'
        // })
        _send('pay_refresh');
    }

    function _more() {
        _url({
            url: 'frame4/zhangdan',
            title: '账单'
        })
    }

    // 联系客服
    function openService() {
        _ajax('api/Member/kefu', function(ret, err) {
            if (ret && ret.data && ret.data.id) {
                _url({
                    touserid: ret.data.id,
                    title: '与客服的聊天',
                    moreType: 1,
                }, 'frame0/liaotian_win')
            } else {
                _msg('暂无法联系客服');
            }
        })
    }
</script>

</html>